<template>
  <div class="login f-c-c h-full">
    <div class="login-content" flex w-full max-w-960>
      <div p-40 border-r border-gray-200>
        <img src="@/assets/images/bg-img.jpg" height="380" alt="login_banner" />
      </div>
      <div w-full f-c-c flex-col>
        <h5 f-c-c w-full p-15 text-24 font-normal color="#6a6a6a">
          <icon-custom-logo mr30 text-50 text-primary />
          <span text-primary>{{ title }}</span>
        </h5>
        <!-- <div mt-35 w-full max-w-360>
          <a-input v-model:value="userName" placeholder="请输入用户名" />
        </div>
        <div mt-35 w-full max-w-360>
          <a-input-password v-model:value="password" placeholder="请输入密码" />
        </div>
        <div mt-35 w-full max-w-360 f-c-c>
          <a-button type="primary" @click="handleLogin">登录</a-button>
        </div> -->
        <div mt-35 w-full max-w-360 f-c-c>
          <a-form :model="loginForm" name="basic" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
            <a-form-item name="username" :rules="[{ required: true, message: '请输入账号！' }]">
              <a-input v-model:value="loginForm.username" placeholder="admin/user" />
            </a-form-item>

            <a-form-item name="password" :rules="[{ required: true, message: '请输入密码！' }]">
              <a-input-password v-model:value="loginForm.password" placeholder="123456" />
            </a-form-item>

            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
              <a-button type="primary" html-type="submit">登录</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()
const title = import.meta.env.VITE_APP_TITLE

const loginForm = reactive({
  username: '',
  password: '',
  remember: true,
})

const onFinish = (values) => {
  console.log('Success:', values)
  userStore.login(loginForm)
}

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo)
}

const handleLogin = () => {
  userStore.login(loginForm)
}
</script>
<style lang="scss" scoped>
.login {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(@/assets/images/login_bg.svg);
  background-size: cover;
  &-content {
    box-shadow: 1.5px 3.99px 27px 0px rgb(0 0 0 / 10%);
    background-color: rgba(255, 255, 255, 0.6);
    :deep(.ant-input:hover) {
      border-color: $primary-color;
      box-shadow: none;
    }
    :deep(.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover) {
      border-color: $primary-color;
      box-shadow: none;
    }
    :deep(.ant-btn-primary) {
      border-color: $primary-color;
      background-color: $primary-color;
    }
  }
}
</style>
